<template>
  <!-- 分享的卡片消息 -->
  <div class="chat-bubble">

    <!-- 卡片内容 -->
    <div class="content card-center">
      <div class="bubble card-wrapper" @click="onCardClicked">
        <div class="info-left flex-center column" v-if="chat.imagePutLeft">
          <div class="icon flexbox align-center justify-start">
            <img :src="chat.imageUrl" alt />
            <div class="title-wrapper">
              <div class="title">{{ chat.cardTitle }}</div>
              <div class="content ellipsis">{{ chat.cardContent }}</div>
            </div>
          </div>
          <div class="extra">
            <span>社群助手</span>
          </div>
        </div>

        <div v-else class="flex-center ifas">
          <div class="info" style="overflow:hidden;">
            <div class="title">{{ chat.cardTitle }}</div>
            <div class="content" style="width: 100%;">{{ chat.cardContent }}</div>
          </div>
          <div class="image">
            <img :src="chat.imageUrl" alt />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import MessageMixin from "@/mixins";
import { MsgTypeKV } from '@/api/socket/imClient';
import { formPost } from '@/utils/common';

declare const $Vue: Vue;

@Component<MessageCard>({
  mixins: [MessageMixin]
})
export default class MessageCard extends Vue {

  @Prop({})
  chat: any;

  private eventList: Array<any> = ['$clickShareCard'];

  protected mounted() {
    this.initEvents(this.eventList);
  }

  private onCardClicked() {
    this.sendMessage(MsgTypeKV.clickShareCard, {
      targetUrl: this.chat.targetUrl,
      param: this.chat,
    });
  }

  private $clickShareCard(data: any) {
    if (data.result === 0) {
      formPost(data.targetUrl, data.param);
    } else {
      this.$createToast({
        txt: data.message,
        type: "warn",
        time: 3000
      }).show();
    }
  }
}
</script>

<style lang="stylus" scoped>
.bubble-photo
  max-height 100% 
  max-width 100%

.card-wrapper
  text-align left!important
  height 90px
  width 200px
  min-width 200px!important
  display flex
  padding 0!important
  .info 
    padding 8px
    .title 
      height 24px
      line-height 24px
      font-size 16px
      padding-left 10px
    .content
      // height 24px
      line-height 18px
      font-size 12px
      color #909090
  .image 
    width 48px
    height 100%
    display flex 
    align-items flex-end
    padding-right 10px
    img 
      border-radius 8px
      width 48px
      height 48px

.chat-bubble .content .bubble:before
  border-color transparent

.chat-bubble
  justify-content center

.card-center 
  justify-content center!important

.info-left
  width 100%
  .icon 
    padding 8px
    flex-basis 86% 
    img 
      border-radius 8px
      width 48px
      height 48px
    .title 
      height 24px
      line-height 24px
      font-size 16px
      padding-left 10px
    .content
      line-height 18px
      font-size 12px
      color #909090
  .extra 
    padding-left 8px
    flex-basis 14% 
    width 100%
    font-size 11px 
    color #909090
    text-align left 
    border-top 0.8px solid #ddd
    box-sizing border-box
.ifas
  width 100% 
  padding-bottom 12px
</style>

